<script lang="ts" setup>
import { ref } from 'vue'
import { userUnloginApi } from '@/api'
import { getLocalStorage, routerPush } from '@/utils/tools'
import type { UserInfo } from '@/interfaces/localStorage'
import store from '@/store'

const popselectValue = ref('')
const options = ref([
  {
    label: '退出登录',
    value: 0,
  },
])

/**
 * @description: 分发模式
 * @param {number} num 选择模式
 */
const distributeMethods = (num: number) => {
  switch (num) {
    case 0:
      unLogin()
      break
  }
}

/**
 * @description: 退出登录,删除所有用户信息,返回登录页面
 * @return {void}
 */
const unLogin = async () => {
  let userInfo = getLocalStorage<UserInfo>('userInfo')
  const res = await userUnloginApi({ id: userInfo.id })
  if (res.data.code === 200) {
    window.localStorage.removeItem('userInfo')
    store.commit('setIsOk', false)
    store.commit('setLinkZreo')
    routerPush({
      name: 'login',
    })
  }
}

const imgUrl = ref(JSON.parse(window.localStorage.getItem('userInfo') as any).userInfo.imgUrl)
const userName = ref(JSON.parse(window.localStorage.getItem('userInfo') as any).userName)
</script>

<template lang="pug">
div(class="hearder")
  div(class="hearder-left")
    n-gradient-text(type="danger" class="font-extrabold text-2xl") 义愤填膺后台管理系统
  div(class="header-right")
    n-avatar(:src="imgUrl")
    div {{userName}}
    n-popselect(v-model:value="popselectValue" :options="options" @update:value="distributeMethods")
      span(class="header-right-img-popselect_span") 登录
</template>

<style lang="scss" scoped>
.hearder {
  padding: 1rem 0rem;
  display: flex;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 2rem;
  .header-right-img {
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid;
    border-radius: 50%;
  }
  .header-right-img-popselect_span {
    cursor: pointer;
  }
}
</style>
